<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/*抓到心*/
			div{
				width: 300px;
				height: 300px;
				/*效果：背景色*/
				background-color: #e4393c;
				/*外边距属性：推m*/
				margin-left: 10px;
				margin-top: 10px;
				/*居中 上下 右左*/
				margin: 300px auto;
				/*旋转   转换属性：旋转属性值*/
				transform: rotate(135deg);
				/*美化操作  过滤属性--下阴影效果：光晕*/
				filter: drop-shadow(0 0 50px #ff3d77);
				/*启动动画属性： 关键帧名称 过渡时间 流畅度 无线次*/
				animation: heart 0.01s linear infinite;
				/*两个园*/
				/*伪类选择器：追加效果
				  after   语法：任意选择器
				  */
				 
			}
			div:after{
				content: "";
				/*html很多元素：种类
				  文本内容-->行内元素，特点： 不可设置宽高，在一行内显示
				  div：  -->块元素特点：  可设置宽高 独占一行
				            行内元素转变为块元素 使用display属性*/
				display: block;
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				border-radius: 50%;
				/*微调定位：*/
				position: relative;
				left:-150px;
				top:-300px;
			}
			div:before{
				content: "";
				display: block;
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				border-radius: 50%;
				/*微调定位：*/
				position: relative;
				bottom: -150px;
			}
			/*关键帧属性：功能：手翻书功能*/
			@keyframes heart{
				0%{
					/*缩放 转换属性 属性值：scale（1以下缩小，1以上放大）*/
					transform: rotate(135deg) scale(1);
				}
				10%{
					transform: rotate(135deg) scale(0.9);
				}
				20%{
					transform: rotate(135deg) scale(0.8);
				}
				30%{
					transform: rotate(135deg) scale(0.7);
				}
				40%{
					transform: rotate(135deg) scale(0.6);
				}
				50%{
					transform: rotate(135deg) scale(0.5);
				}
				60%{
					transform: rotate(135deg) scale(0.6);
				}
				70%{
					transform: rotate(135deg) scale(0.7);
				}
				80%{
					transform: rotate(135deg) scale(0.8);
				}
				90%{
					transform: rotate(135deg) scale(0.9);
				}
				100%{
					transform: rotate(135deg) scale(1);
				}
			}
		</style>
	</head>
	<body>
		<!-- 使用1个div-->
		<div></div>
	</body>
</html>